<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暖言树洞 - 欢迎</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Hero Section -->
        <div class="container" style="padding-top: 3rem;">
            <div class="text-center mb-8">
                <div class="ai-cat mb-4" style="width: 80px; height: 80px; font-size: 2rem; margin: 0 auto;">
                    🐱
                </div>
                <h1 class="text-3xl font-bold text-neutral-800 mb-2">暖言树洞</h1>
                <p class="text-lg text-neutral-600">AI陪伴 · 隐私保护 · 温暖传递 · 公益价值</p>
            </div>
            
            <!-- Features -->
            <div class="mb-8">
                <div class="card mb-4 card-hover">
                    <div class="flex items-start">
                        <div class="ai-cat mr-4" style="background: var(--primary-500);">
                            🤖
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-lg mb-2">AI暖言陪伴</h3>
                            <p class="text-neutral-600 text-sm">智能AI猫猫24小时在线，为你的每一篇心情日记提供温暖回复，让你不再孤单。</p>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-4 card-hover">
                    <div class="flex items-start">
                        <div class="ai-cat mr-4" style="background: var(--secondary-500);">
                            🔒
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-lg mb-2">隐私安全漂流</h3>
                            <p class="text-neutral-600 text-sm">先进的隐私计算技术保护你的个人信息，让日记安全地漂流到有缘人手中。</p>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-4 card-hover">
                    <div class="flex items-start">
                        <div class="ai-cat mr-4" style="background: var(--warning-500);">
                            💝
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-lg mb-2">温暖互助点评</h3>
                            <p class="text-neutral-600 text-sm">与陌生人分享温暖，通过点评他人的心情日记传递正能量，建立心灵连接。</p>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-6 card-hover">
                    <div class="flex items-start">
                        <div class="ai-cat mr-4" style="background: var(--success-500);">
                            🌟
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-lg mb-2">公益价值实现</h3>
                            <p class="text-neutral-600 text-sm">你的温暖行为将转化为暖心货币，用于支持真实的公益项目，让善意产生实际价值。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Getting Started -->
            <div class="text-center mb-6">
                <button onclick="window.location.href='home.html'" class="btn btn-primary btn-lg w-full animate-pulse">
                    <i class="fas fa-heart mr-2"></i>
                    开始我的暖心之旅
                </button>
            </div>
            
            <!-- Footer -->
            <div class="text-center text-xs text-neutral-400 mb-6">
                <p class="mb-2">
                    <a href="#" class="text-primary">隐私政策</a> · 
                    <a href="#" class="text-primary">用户协议</a>
                </p>
                <p>© 2025 暖言树洞 · 用技术传递温暖</p>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.animation = 'fadeInUp 0.6s ease forwards';
                }, index * 150);
            });
        });
    </script>
</body>
</html>
